<!DOCTYPE html>

<html>

<head>

    <!-- 页面meta -->

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>淘淘网</title>
<!--
music
     <embed src="D:\workspace\spring\canyouspeakchinese\src\main\resources\static\pages\Starboy.mp3" hidden="flase" autostart="true" loop="true"></embed>
-->


    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式 -->

    <link rel="stylesheet" href="../plugins/elementui/index.css">

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/style.css">

</head>

<body class="hold-transition">
<!--引入VUE-->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>

<style>
    ul,li{
        list-style: none;
    }
    li{
        float: left;
    }
    input{
        text-align: center;
    }
</style>

<div id="app">

    <div class="content-header">

        <h1>淘淘网，淘出你的喜爱！</h1>

    </div>

    <div class="app-container">

        <div class="box">
            <!--查询组件-->
            <div class="filter-container">
                <!--<el-input placeholder="商品类别" v-model="pagination.type" style="width: 200px;" class="filter-item"></el-input>-->
                <el-input placeholder="商品名称" v-model="pagination.name" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="商品描述" v-model="pagination.description" style="width: 200px;" class="filter-item"></el-input>
                <el-button @click="getAll()" class="dalfBut">查询</el-button>
                <!--<el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
                <el-button class="butT" @click="goAway()">退出登录</el-button>
                <el-button class="butT" @click="deleteUser()">注销账户</el-button>-->

            </div>

            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>

                <!--<el-table-column label="static/login/images/loginbg.png" align="center" >
                    <template slot-scope="scope">
                        　　　　<img :src="scope.row.imageUrl" width="180" height="320" class="head_pic"/>
                    </template>
                </el-table-column>-->

                <el-table-column label="商品封面" align="center" width="75" height="70">
                    　　<template slot-scope="scope">
                    　　　　<img :src="scope.row.goodsPic"class="head_pic"/>
                    　　</template>
                </el-table-column>
                <!--<el-table-column type="index" align="center" label="序号"></el-table-column>-->
                <el-table-column prop="type" label="商品类别" align="center"></el-table-column>

                <el-table-column prop="name" label="商品名称" align="center" ></el-table-column>

                <el-table-column prop="description" label="描述" align="center"></el-table-column>

                <el-table-column prop="count" label="商品数量" align="center" width="75" height="75"></el-table-column>

                <el-table-column prop="price" label="商品单价" align="center" width="75" height="75"></el-table-column>

                <el-table-column prop="countt" label="购买数量" align="center">
                    <template slot-scope="scope" width="70" height="75">
                        <!--<el-button type="primary" size="mini" @click="subtract(scope.row)">-</el-button>-->
                        <el-input-number v-model="scope.row.countt" @change="handleSum(scope.row)" placeholder="0":min="0" :max="999"></el-input-number>
                        <!--<el-button type="danger" size="mini"@click="add(scope.row)">+</el-button>-->
                    </template>
                </el-table-column>

                <!--购买总价-->
                <el-table-column prop="totalprice" label="选购总价" align="center">
                    <!--<template slot-scope="scope">
                        <el-form v-model="scope.row.totalprice" placeholder="0" ></el-form>
                    </template>-->
                </el-table-column>

               <el-table-column label="操作" align="center">
                   <template slot-scope="scope" >
                       <el-button type="primary"  @click="buyToOrder(scope.row)">购买</el-button>
                   </template>
               </el-table-column>
              <!-- <el-table-column label="商品总价" align="center">

                   &lt;!&ndash;<el>总价:￥</el>&ndash;&gt;
                   &lt;!&ndash;{{countt}}&ndash;&gt;
                       &lt;!&ndash;<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>

                       <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>&ndash;&gt;

                       &lt;!&ndash;<div class="box">
                           <ul>
                               <li>宝贝数量：</li>
                               <li><button @click="subtract()">-</button></li>
                               <li><input type="text" value="0" size="1" v-model="count"></li>
                               <li><button @click="add()">+</button></li>
                           </ul>
                       </div>&ndash;&gt;
               </el-table-column>-->

            </el-table>

            <!--分页组件-->
            <div class="pagination-container">

                <el-pagination
                        class="pagiantion"

                        @current-change="handleCurrentChange"

                        :current-page="pagination.currentPage"

                        :page-size="pagination.pageSize"

                        layout="total, prev, pager, next, jumper"

                        :total="pagination.total">

                </el-pagination>

            </div>

            <!-- 新增标签弹层 -->

            <div class="add-form">

                <el-dialog title="新增商品" :visible.sync="dialogFormVisible">

                    <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">

                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="商品类别" prop="type">

                                    <el-input v-model="formData.type"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="商品名称" prop="name">

                                    <el-input v-model="formData.name"/>

                                </el-form-item>

                            </el-col>

                        </el-row>


                        <el-row>

                            <el-col :span="24">

                                <el-form-item label="描述">

                                    <el-input v-model="formData.description" type="textarea"></el-input>

                                </el-form-item>

                            </el-col>

                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="cancel()">取消</el-button>

                        <el-button type="primary" @click="handleAdd()">确定</el-button>

                    </div>

                </el-dialog>
                <!--音乐播放-->
               <!-- <audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"
                       src="D:\workspace\spring\canyouspeakchinese\src\main\resources\static\pages\Starboy.mp3">
                </audio>

                <bgsound src="D:\workspace\spring\canyouspeakchinese\src\main\resources\static\pages\Starboy.mp3" autostart=true loop=infinite>
                --><!--这里是Post新建按钮弹层-->
                <!--<form action="/books/save" method="post">
                    商品类型：<input type="text" name="type">
                    商品名称：<input type="text" name="name">
                    商品描述：<input type="text" name="description">
                    商品样式：<input type="text" name="imgpath">
                    <button type="submit">from方式保存</button>

                </form>-->

            </div>

            <!-- 编辑标签弹层 -->

            <div class="add-form">

                <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">

                    <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">

                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="商品类别" prop="type">

                                    <el-input v-model="formData.type"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="商品名称" prop="name">

                                    <el-input v-model="formData.name"/>

                                </el-form-item>

                            </el-col>

                        </el-row>

                        <el-row>

                            <el-col :span="24">

                                <el-form-item label="描述">

                                    <el-input v-model="formData.description" type="textarea"></el-input>

                                </el-form-item>

                            </el-col>

                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="cancel()">取消</el-button>

                        <el-button type="primary" @click="handleEdit()">确定</el-button>

                    </div>

                </el-dialog>

                <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">

                    <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">

                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="商品类别" prop="type">

                                    <el-input v-model="formData.type"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="商品名称" prop="name">

                                    <el-input v-model="formData.name"/>

                                </el-form-item>

                            </el-col>

                        </el-row>

                        <el-row>

                            <el-col :span="24">

                                <el-form-item label="描述">

                                    <el-input v-model="formData.description" type="textarea"></el-input>

                                </el-form-item>

                            </el-col>

                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="cancel()">取消</el-button>

                        <el-button type="primary" @click="handleEdit()">确定</el-button>

                    </div>

                </el-dialog>

            </div>

        </div>

    </div>

</div>

</body>

<!-- 引入组件库 -->

<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/axios-0.18.0.js"></script>

<script>
    var vue = new Vue({
        el: '#app',
        data:{
            countt:0,//用户选择商品数
            totalprice:0,//商品总价
            dataList: [],//当前页要展示的列表数据
            dialogFormVisible: false,//添加表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            postDialogFormVisible:false,
            formData: {},//表单数据
            postData: [],//post数据
            rules: {//校验规则
                type: [{ required: true, message: '商品类别为必填项', trigger: 'blur' }],
                name: [{ required: true, message: '商品名称为必填项', trigger: 'blur' }]
            },
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:15,//每页显示的记录数
                total:0,//总记录数
                 type: "",
                name: "",
                description: ""

            }
        },

        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.getAll();
        },

        methods: {
            //列表
            //分页查询
            getAll() {
                //组织参数，拼接url请求地址
                // console.log(this.pagination.type);
                //param = "?type="+this.pagination.type;摒弃了type
                param +="&goods_name="+this.pagination.name;
                param +="&goods_disc="+this.pagination.description;
                // console.log(param);

                //发送异步请求
                axios.get("/goods/"+this.pagination.currentPage+"/"+this.pagination.pageSize+param).then((res)=>{
                    this.pagination.pageSize = res.data.data.size;
                    this.pagination.currentPage = res.data.data.current;
                    this.pagination.total = res.data.data.total;
                    this.dataList = res.data.data.records;
                });
            },

            //弹出添加窗口
            handleCreate() {
                var that = this;
                that.dialogFormVisible = true;
                that.resetForm();
            },

            //重置表单
            resetForm() {
                var that = this;
                that.formData = {};
            },

            //添加
            handleAdd () {
                var that = this;
                axios.post("/books",that.formData)
                    .then(function (response) {
                        //判断当前操作是否成功
                        if(response.data.flag){
                            //关闭弹层
                            that.dialogFormVisible = false;
                            //提示添加成功
                            that.$message.success(response.data.exmessage);
                        }else {
                            that.$message.error(response.data.exmessage);
                        }

                    }).finally(
                        function(){
                            //成功失败都会重新加载数据
                            that.getAll();

                });
            },
            //用户注销
            /*deleteUser(){
                this.$confirm("将永久删除此账号，是否继续？","提示",{type:"info"}).then(()=> {
                        axios.delete("/users/" + row.id).then((resp) => {
                            //判断当前操作是否成功
                            if (resp.data.flag) {
                                //提示删除成功
                                this.$message.success("删除成功");
                            } else {
                                this.$message.error("数据同步失败,已刷新");
                            }
                        })
                    },*/
            /*//增加商品
            add(row){
                console.log(this.countt);
                console.log(this.row);
                console.log(row);
                row.countt++;
            },
            //减少商品
            subtract(row) {
                console.log(this.countt);
                console.log(this.row);
                console.log(row);
                if (row.countt <= 0) {
                    alert('受不了啦，宝贝不能再减少啦')
                    row.countt = 0;
                } else {
                    row.countt -= 1;
                }
            },*/
            //商品总价
            handleSum(row){
                row.totalprice = row.countt*row.price;
                console.log(this.totalprice);
                console.log(row);

            },
            //单件商品购买（增加客户消费量）
            buyToOrder(row){
                this.$confirm("将购买该件商品，是否跳转支付？","提示",{type:"info"}).then(()=>{
                    axios.post("/orders/"+row.totalprice).then((resp)=>{
                        //判断当前操作是否成功
                        if(resp.data.flag){
                            //提示删除成功
                            this.$message.success("删除成功");
                        }else {
                            this.$message.error("数据同步失败,已刷新");
                        }
                    }).catch(()=>{
                        this.$message.info("已取消删除");//下面是点击取消的操作
                })

            }

            //用户退出
            goAway(){
                alert("用户已登出*-*");
                window.location.href="/users/goaway";
            },

            //Post方式添加
            postHandleAdd() {
                var postParam = formData.type;
                console.log(postParam);
                window.location.href="/books/save";
            },

            //取消
            cancel(){
                var that = this;
                that.dialogFormVisible = false;
                that.dialogFormVisible4Edit = false;
                that.postDialogFormVisible = false;
                that.$message.info("当前操作已取消");
            },
            // 删除
            handleDelete(row) {
                this.$confirm("将永久删除该数据，是否继续？","提示",{type:"info"}).then(()=>{
                    axios.delete("/books/"+row.id).then((resp)=>{
                        //判断当前操作是否成功
                        if(resp.data.flag){
                            //提示删除成功
                            this.$message.success("删除成功");
                        }else {
                            this.$message.error("数据同步失败,已刷新");
                        }
                    }).finally(()=>{
                        this.getAll();
                    });//下面是点击取消的操作
                }).catch(()=>{
                    this.$message.info("已取消删除");
                })

            },

            //弹出编辑窗口
            handleUpdate(row) {
                axios.get("/books/"+row.id).then((resp)=>{
                    if(resp.data.flag&&resp.data.data!=null){
                    this.dialogFormVisible4Edit = true;
                    this.formData = resp.data.data;
                }else {
                    this.$message.error("数据同步失败,已刷新");
                }
                }).finally(()=>{
                    this.getAll();
                });

            },

            //修改
            handleEdit() {
                    var that = this;
                    axios.put("/books",that.formData).then((resp)=>{
                        //判断当前操作是否成功
                        if(resp.data.flag){
                            //提示修改成功
                            this.dialogFormVisible4Edit = false;
                            this.$message.success("修改成功");
                        }else {
                            this.dialogFormVisible4Edit = false;
                            this.$message.error("修改失败,该数据或已被删除");
                        }
                    }).finally(()=>{
                        this.getAll();
                    });//下面是点击取消的操作
                },


            //分页查询

            //切换页码
            handleCurrentChange(currentPage) {
                var that = this;
                //修改页码值为当前选中的页码值
                that.pagination.currentPage = currentPage;
                //执行查询
                that.getAll();
            },

            //条件查询
        }
    })

</script>

</html>